import { defineComponent, ref, getCurrentInstance } from 'vue'
// 假设自定义指令名为 v-focus
export default defineComponent({
  props: {
    tagName: {
      type: String,
      required: true,
    },
    id: {
      type: [String, Number],
      default: null,
    },
  },
  setup(props, { slots, attrs }) {
    const instance = getCurrentInstance()
    // 这里确实可以实现，从外部传递指令进来
    instance.directives = attrs.directives
    console.log(`instance 👉`, instance)
    const inputRef = ref(null)

    return () => (
      <div>
        <input ref={inputRef} type="text" v-focus />
        <button onClick={() => inputRef.value.focus()}>Focus Input</button>
        <div>{slots.default()}</div>
      </div>
    )
  },
})
